<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .active {
      color: rgb(207, 148, 148);
    }
  </style>
  <script src="./js/react.development.js"></script>
  <script src="./js/react-dom.development.js"></script>
</head>
<body>
  <div id="root" class="xxx"></div>

  <script>
    const element = React.createElement(
      'h1',
      { // 给真实DOM提供属性, 不是直接给页面标签提供属性  
        //  react元素(className)=> 真实DOM元素(className) => html标签(class)
        title: '你好, React!',
        // class: 'active'  // 不可以
        className: 'active'
      },  // 如果没有属性 null
      'Hello React!'
    )
    console.dir(document.getElementById('root')) // 真实DOM元素
    // html标签中的class属性在真实DOM中是什么属性?   className: "xxx"

    // console.dir: 打印的dom元素以对象的形式输出, 而不是以标签的形式输出

   

    ReactDOM.render(element, document.getElementById('root'))
  </script>
</body>
</html>